<template>
  <!-- 添加或修改代理商对话框 -->
  <el-dialog v-model="open" :beforeClose="cancel" :title="title" append-to-body width="1000px">
    <el-form ref="agentRef" :model="form" :rules="rules" label-width="150px">
      <el-divider content-position="left">基础信息</el-divider>
      <el-form-item label="名称">
        <el-input v-model="form.agentName" placeholder="请输入合伙人名称" />
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="form.agentPhone" placeholder="请输入合伙人手机号" />
      </el-form-item>

      <!--      修改状态下不填写密码-->
      <el-form-item v-if="form.id == null" label="登录密码">
        <el-input v-model="form.agentPassword" placeholder="请输入合伙人登录密码" />
      </el-form-item>

      <el-form-item label="增加下级合伙人">
        <el-radio-group v-model="form.isSon">
          <el-radio v-for="dict in is_son" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="合伙人状态">
        <el-radio-group v-model="form.agentState">
          <el-radio v-for="dict in agent_state" :key="dict.value" :label="parseInt(dict.value)">{{ dict.label }} </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item :rules="[{ required: true, message: '请上传证件正面', trigger: 'change' }]" label="证件正面">
            <ImageUpload v-model="form.identityFront" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :rules="[{ required: true, message: '请上传证件反面', trigger: 'change' }]" label="证件反面">
            <ImageUpload v-model="form.identityBack" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item :rules="[{ required: true, message: '请上传营业执照', trigger: 'change' }]" label="营业执照">
            <ImageUpload v-model="form.agentBusiness" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :rules="[{ required: true, message: '请上传协议照片', trigger: 'change' }]" label="协议照片">
            <ImageUpload v-model="form.agentAgreement" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">费率信息</el-divider>
      <!--      <el-alert-->
      <!--        :closable="false"-->
      <!--        class="mb20"-->
      <!--        show-icon-->
      <!--        title="温馨提示：基础费率：贷记卡费率：0.5100%；借记卡费率：0.3825%；借记卡封顶值：16.25；扫码费率：0.2100%；云闪付费率：0.2100%"-->
      <!--        type="warning"-->
      <!--      />-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="借记卡费率" prop="cardPay.debitRate">
            <el-input-number v-model="form.cardpayDebitRate" :clearable="true" :precision="2" :step="0.01" placeholder="请输入" style="width: 60%" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="贷记卡费率" prop="cardPay.feeRate">
            <el-input-number v-model="form.cardpayFeeRate" :clearable="true" :precision="2" :step="0.01" placeholder="请输入" style="width: 60%" type="text" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="银联扫码费率" prop="quickPassPay.perferStage.feeRate">
            <el-input-number v-model="form.preferstageFeerate" :clearable="true" :precision="2" :step="0.01" placeholder="请输入" style="width: 60%" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="借记卡封顶值" prop="cardPay.debitCap">
            <el-input v-model="form.cardpayDebitCap" :clearable="true" style="width: 60%" type="number" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="微信费率" prop="wxPay.feeRate">
            <el-input-number v-model="form.wxpayFeerate" :clearable="true" :precision="2" :step="0.01" placeholder="请输入" style="width: 60%" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付宝费率" prop="aliPay.feeRate">
            <el-input-number v-model="form.alipayFeerate" :clearable="true" :precision="2" :step="0.01" placeholder="请输入" style="width: 60%" type="text" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">预警信息</el-divider>
      <el-form-item label="手续费封顶值" prop="capValue">
        <el-input v-model="form.capValue" placeholder="请输入手续费封顶值" />
      </el-form-item>
      <el-form-item label="报警值" prop="prewarningValue">
        <el-input v-model="form.prewarningValue" placeholder="请输入报警值" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script name="AgentAdd" setup>
  import { getCurrentInstance, reactive, toRefs, watch } from 'vue';
  import { addAgent, updateAgent } from '@/api/agent/agent';
  import ImageUpload from '@/components/ImageUploadThis';

  const { proxy } = getCurrentInstance();
  const { commercial_tenant_state, is_son, agent_state } = proxy.useDict('commercial_tenant_state', 'is_son', 'agent_state');
  const props = defineProps({
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '添加合伙人',
    },
    datas: {
      type: Object,
      default: {},
    },
  });

  const data = reactive({
    form: {
      agentName: null,
      agentState: null,
      isSon: null,
      activatedState: null,
      tenantId: null,
      parentId: null,
      parentIds: null,
      capValue: null,
      prewarningValue: null,
      serviceCharge: null,
      closedServiceCharge: null,
      serviceChargeSymbol: null,
      agentPhone: null,
      agentPassword: null,
      identityFront: null,
      identityBack: null,
      agentBusiness: null,
      agentAgreement: null,
      emil: null,
      cardpayFeeRate: null,
      cardpayDebitRate: null,
      cardpayDebitCap: null,
      preferstageFeerate: null,
      wxpayFeerate: null,
      alipayFeerate: null,
    },
    rules: {},
  });

  const { form, rules } = toRefs(data);

  watch(
    () => props.datas,
    () => {
      // console.log(props.datas);
      form.value = props.datas;
    },
    { deep: true, immediate: true },
  );

  const emit = defineEmits(['update']);

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs['agentRef'].validate((valid) => {
      if (valid) {
        if (form.value.id != null) {
          updateAgent(form.value).then((response) => {
            proxy.$modal.msgSuccess('修改成功');
            cancel();
          });
        } else {
          addAgent(form.value).then((response) => {
            proxy.$modal.msgSuccess('新增成功');
            cancel();
          });
        }
      }
    });
  }

  // 取消按钮
  function cancel() {
    emit('update');
    reset();
  }

  function reset() {
    form.value = {
      agentName: null,
      agentState: null,
      isSon: null,
      activatedState: null,
      tenantId: null,
      parentId: null,
      parentIds: null,
      capValue: null,
      prewarningValue: null,
      serviceCharge: null,
      closedServiceCharge: null,
      serviceChargeSymbol: null,
      agentPhone: null,
      agentPassword: null,
      identityFront: null,
      identityBack: null,
      agentBusiness: null,
      agentAgreement: null,
      emil: null,
      cardpayFeeRate: null,
      cardpayDebitRate: null,
      cardpayDebitCap: null,
      preferstageFeerate: null,
      wxpayFeerate: null,
      alipayFeerate: null,
    };
    proxy.resetForm('agentRef');
  }
</script>

<style scoped></style>
